<template>
  <div class="g-waiting">
    <div class="info_p">
      <p class="info">还差1人可成团，有2547人也在团它哦~</p>
      <div class="time">
        <span class="time_span1">距拼团结束</span>
        <span class="countdown">1233546</span>
      </div>
    </div>
    <div class="img">
      <div class="one">
        <van-image round width="1rem" height="1rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <span class="sp1">团长</span>
      </div>
      <div>
        <van-image round width="1rem" height="1rem" src />
      </div>
    </div>
    <div>
      <button class="bgr btns" @click="ct">一建参团</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { tokenCook } from "../utils/cookies";
import { jzlocal } from "../utils/localStorage";
export default {
  name: "spell",
  data() {
    return {
      tuan: {},
      info: {},
      shoopObj: {},
    };
  },
  methods: {
    ...mapActions("groups", ["getmass", "updategroups"]),
    ...mapActions("login", ["getName", "getinfo"]),
    ...mapActions("gdetail", ["getShoop"]),
    // 一键参团
    async ct() {
      this.tuan.uids = JSON.parse(this.tuan.uids);
      this.tuan.uids.push(this.info.id);
      let obj = {
        id: this.tuan.gid,
        sid: this.shoopObj.id,
        regimental: this.tuan.regimental,
        uids: JSON.stringify(this.tuan.uids),
      };
      // 添加第二人
      await this.updategroups(obj);
      // 生成商品数据
      console.log(this.shoopObj);
      let obj1 = {
        id: this.shoopObj.id,
        num: 1,
        bm: "套餐一",
      };
      jzlocal.set([obj1]);
      this.$router.push("/groupon");
    },
    // 规格选择
    tcFn(text) {
      this.tc = text;
    },
  },
  async mounted() {
    let obj = this.$route.query;
    // 当前拼团信息
    let r = await this.getmass(obj);
    this.tuan = r[0];
    // 当前用户信息
    let token = tokenCook.get();
    this.info = await this.getinfo(token);
    // 当前商品信息
    let res = await this.getShoop({ ids: obj.id });
    this.shoopObj = res[0];
  },
};
</script>

<style scoped>
.g-waiting {
  padding: 0.333rem 0;
  text-align: center;
}

.g-waiting .info {
  font-size: 0.3rem;
  margin: 0;
  font-weight: normal;
}

.time_span1 {
  font-size: 12px;
}

.countdown {
  font-size: 12px;
  color: #fb6750;
}

.img {
  display: flex;
  justify-content: center;
}

.img div {
  margin: 5px;
}

.one {
  position: relative;
}

.sp1 {
  width: 30px;
  display: inline-block;
  padding: 5px;
  background-color: orangered;
  border-radius: 20px;
  font-size: 13px;
  position: absolute;
  bottom: 0;
  left: 15px;
}

.g-waiting .btns {
  outline: none;
  width: 90%;
  height: 1.106667rem;
  color: #fff;
  border-radius: 5px;
  border: none;
  margin-bottom: 0.533333rem;
  font-size: 0.4rem;
  display: inline-block;
  line-height: 1.106667rem;
}

.bgr {
  background: #fc6850;
  box-shadow: 0px 3px 12px #fc6850;
}
</style>